<template>
  <div class="tab-content fullyarn-warehouse">
    <div class="legend">
      <el-button
        v-if="statusCode !== '111360'"
        type="primary"
        :icon="QuestionFilled"
        text
        @click="viewLegend"
        >图例说明</el-button
      >
      <span>{{ timeStr }}</span>
    </div>
    <div class="flow-chart">
      <div class="chart-item" v-for="(item, index) in yarnList" :key="index">
        <div class="header">{{ item.name }}{{ statusCode === '111360' ? '机台' : '' }}</div>
        <div class="content">
          <div class="inner-row">
            <div class="row-item" v-for="(rowItem, rowIndex) in item.railMetas" :key="rowIndex">
              <div class="move-up">
                <div
                  class="number"
                  :class="{ active: [5, 6, 15, 7, 8, 16].includes(rowItem.railState) }"
                  >{{ rowItem.name }}</div
                >
                <!-- 3.0版本逻辑：入库(5,6,15)右箭头  出库(7，8，16)左箭头 -->
                <div
                  class="triangle"
                  :class="{ active: [5, 6, 15, 7, 8, 16].includes(rowItem.railState) }"
                >
                  <div class="line"></div>
                  <el-icon><CaretRight /></el-icon>
                </div>
                <div
                  class="rail"
                  :style="{
                    backgroundColor: handleRailStateName(rowItem.railState)[1] || '#c4c7ce'
                  }"
                  >{{ handleRailStateName(rowItem.railState)[0] || '' }}</div
                >
                <div
                  class="together"
                  :style="{
                    backgroundColor: rowItem.thirdMaterialColor || '#d4d3d3'
                  }"
                >
                  <div class="material">
                    {{ rowItem.materialName || rowItem.thirdMaterialNum }}
                  </div>
                  <div class="order">
                    {{ rowItem.railOrder }}
                  </div>
                </div>
                <div class="csNo number" v-if="statusCode !== '111360'">
                  {{ rowItem.fromMachineCsNo }}
                </div>
                <div class="time">
                  {{
                    rowItem.stateChangeTime != null
                      ? dayjs(rowItem.stateChangeTime).format('MM-DD HH:mm')
                      : null
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <Modal @register="registerModal" />
</template>
<script setup lang="ts">
  import dayjs from 'dayjs'
  import { QuestionFilled, CaretRight } from '@element-plus/icons-vue'
  import { handleRailStateName } from '../../utils'
  import { useVxeModal } from '@/components/ui/vxe-modal'
  import { getManShaKuXinXi, getWeiShaKuXinXi, getCuShaKuXinXi } from '@/api/shengChanJianShi'
  import Modal from './legendModal.vue'

  const props = defineProps({
    statusCode: String
  })

  const [registerModal, modalMethods] = useVxeModal()

  const viewLegend = () => {
    modalMethods.openModal(true, {
      ...props
    })
  }

  const timeStr = ref()
  const yarnList = ref<any>([])
  const getInfo_fullYarn = () => {
    getManShaKuXinXi().then((res: any) => {
      res.fullSpinningStoresRealInfo.sort((a, b) => {
        return a - b
      })
      yarnList.value = res.fullSpinningStoresRealInfo
      timeStr.value = dayjs(res.upperTime).format('MM-DD HH:mm')
    })
  }
  const getInfo_tailYarn = () => {
    getWeiShaKuXinXi().then((res: any) => {
      res.storesRealInfo.sort((a, b) => {
        return a - b
      })
      yarnList.value = res.storesRealInfo
      timeStr.value = dayjs(res.upperTime).format('MM-DD HH:mm')
    })
  }
  const getInfo_roving = () => {
    getCuShaKuXinXi().then((res: any) => {
      yarnList.value = res.storesRealInfo
      timeStr.value = dayjs(res.upperTime).format('MM-DD HH:mm')
    })
  }

  const handleInit = (val) => {
    if (val === '111340') {
      // 满纱库
      getInfo_fullYarn()
    } else if (val === '111350') {
      // 尾纱库
      getInfo_tailYarn()
    } else if (val === '111360') {
      // 粗纱库
      getInfo_roving()
    }
  }

  const clearTimeSet = ref()
  watch(
    () => props.statusCode,
    (val) => {
      handleInit(val)
      clearTimeSet.value = setInterval(() => {
        handleInit(val)
      }, 30000)
    },
    { immediate: true }
  )

  onUnmounted(() => {
    clearInterval(clearTimeSet.value)
  })
</script>
<style scoped lang="scss">
  .legend {
    display: flex;
    font-size: 20px;
    font-weight: bold;
    justify-content: end;
    padding-right: 20px;
    box-sizing: border-box;
    margin-bottom: 14px;
    .el-button {
      color: #78be20;
      font-weight: bold;
      font-size: 20px;
    }
    span {
      line-height: 32px;
    }
  }
  .flow-chart {
    display: flex;
    flex-wrap: wrap;
    .chart-item {
      width: 32.3%;
      min-width: 520px;
      margin-right: 15px;
      margin-bottom: 20px;

      .header {
        height: 40px;
        line-height: 40px;
        font-weight: bold;
        font-size: 20px;
        color: rgba(0, 0, 0, 0.9);
        text-align: center;
        background-color: #e0e0e0;
        border-radius: 8px 8px 0px 0px;
      }

      .content {
        padding: 40px 15px;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 0px 0px 8px 8px;

        .inner-row {
          border: 1px solid #c7c9c6;
          border-radius: 10px;
          height: 100%;

          .row-item {
            height: 60px;
            border-bottom: 1px solid #c7c9c6;

            .move-up {
              position: relative;
              top: -30px;
              width: 100%;
              height: 60px;
              display: flex;
              align-items: center;
              padding: 0 4% 0 5%;
              box-sizing: border-box;
            }
            .number {
              width: 32px;
              height: 32px;
              font-weight: bold;
              font-size: 14px;
              color: #ffffff;
              line-height: 32px;
              text-align: center;
              border-radius: 50%;
              background-color: #c4c7ce;
              &.active {
                background-color: #78be20;
              }
            }
            .triangle {
              display: flex;
              height: 16px;
              align-items: center;
              color: #c4c7ce;
              .line {
                width: 16px;
                border-top: 4px solid #c4c7ce;
                margin-bottom: 0.5px;
              }
              .el-icon {
                margin-left: -8px;
                font-size: 20px;
              }

              &.active {
                .line {
                  border-color: #78be20;
                }
                .el-icon {
                  color: #78be20;
                }
              }
            }

            .rail {
              width: 100px;
              height: 30px;
              line-height: 30px;
              text-align: center;
              border-radius: 6px;
              font-weight: bold;
              font-size: 16px;
              color: #ffffff;
              background-color: #c4c7ce;
            }

            .together {
              display: flex;
              flex: 1;
              width: 130px;
              height: 30px;
              line-height: 30px;
              padding: 0 24px;
              margin-left: 10px;
              box-sizing: border-box;
              font-weight: bold;
              border-radius: 6px;
              font-size: 16px;
              color: #ffffff;
              justify-content: space-between;
            }

            .csNo {
              margin-left: 10px;
            }

            .time {
              width: 100px;
              height: 30px;
              line-height: 30px;
              text-align: center;
              margin-left: 10px;
              border-radius: 6px;
              border: 1px solid #c7c9c6;
              font-size: 16px;
              color: #4f5759;
              background-color: #fff;
            }
          }
          .row-item:last-child {
            border-bottom: none;
            height: 0;
          }
          .row-item:nth-last-child(2) {
            border-bottom: none;
          }
        }
      }
    }
  }
</style>
